<template>
  <el-row>
      <el-col :span="24">
        <el-form label-position="left" size="mini" label-width="60px">
            <mc-api-origin :data="echarts.dataManager.choose0.originData" @choose="choose"  :project-uuid="projectUuid"></mc-api-origin>
            <mc-api :data="echarts.dataManager.choose0.config.api"  :fields="fields" :show-save-btn="false" :show-fields="true" :show-limit="true"></mc-api>
            <el-form-item label="X轴">
               <template v-for="(xItem,xi) in echarts.dataManager.choose0.config.x">
                    <el-select v-model="xItem.field" filterable allow-create>
                          <el-option v-for="(it,i) in fields" :key="it.name" :label="it.title" :value="it.name"></el-option>
                      </el-select>
            </template>
              </el-form-item>
            <el-form-item label="Y轴">
               <template v-for="(yItem,yi) in echarts.dataManager.choose0.config.y">
                  <el-row>
                    <el-col :span="8">
                      <el-select v-model="yItem.field" filterable allow-create placeholder="字段">
                            <el-option v-for="(it,i) in fields" :key="it.name" :label="it.title" :value="it.name"></el-option>
                        </el-select>
                      </el-col>

                    <el-col :span="8">
                      <el-select v-model="yItem.type" filterable allow-create placeholder="图表类型">
                          <el-option v-for="(it,i) in echartsTypes" :key="it.name" :label="it.title" :value="it.name"></el-option>
                      </el-select>
                    </el-col>
                    <el-col :span="8">
                      <el-input v-model="yItem.name" placeholder="标题"></el-input>
                    </el-col>
                    <el-col :span="24">
                      <el-collapse>
                        <el-collapse-item title="面积颜色" name="1">
                          <el-form v-model="yItem.areaStyle">
                            <el-color-picker v-model="yItem.areaStyle.color"></el-color-picker>
                          </el-form>
                        </el-collapse-item>
                        <el-collapse-item title="其他" name="2">

                        </el-collapse-item>
                      </el-collapse>
                    </el-col>
                    <el-col :span="24">
                      <el-button-group>
                        <el-button @click="addYRow(yi)" size="mini" type="primary">+</el-button>
                        <el-button @click="removeYRow(yi)" size="mini" type="danger">-</el-button>
                        </el-button-group>
                    </el-col>

                  </el-row>
               </template>
            </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import McApi from "./McApi";
import McApiOrigin from "./McApiOrigin";
export default {
  name: 'mc-echarts-config',
  data () {
    return {
      fields:[],
      echartsTypes:[{name:"line",title:"线性"},{name:"bar",title:"柱状"},
        {name:"scatter",title:"散点"},{name:"effectScatter",title:"气泡散点"},
        {name:"funnel",title:"漏斗"},{name:"gauge",title:"仪表盘"},
        {name:"radar",title:"雷达"},{name:"sunburst",title:"旭日图"},
        {name:"boxplot",title:"盒子"},{name:"candlestick",title:"K线图"},
        {name:"heatmap",title:"热力图"},{name:"parallel",title:"平行坐标系"},
        {name:"graph",title:"关系图"},{name:"sankey",title:"桑基图"},
        {name:"themeRiver",title:"主题河流"}
      ],
      dialogVisible:false
    }
  },
  components:{
    McApi,McApiOrigin
  },
  computed:{

  },
  props: {
    "echarts":{type:Object},
    "projectUuid":{type:String},
  },
  watch:{
    echarts:{
      handler: function(newVal, oldVal) {
        //监听到属性发生变化 那么修改属性 同时触发渲染
        var  triggerChange = this.echarts.dataManager.choose0.config.api.url && this.echarts.dataManager.choose0.config.api.x && this.echarts.dataManager.choose0.config.api.y;
        if(triggerChange){
          var value = JSON.stringify(newVal.dataManager).replace(/"/g,"'");
          this.$emit("change",value);
        }
      },
      deep: true
    }
  },
  mounted () {

  },
  methods:{
    choose:function(val){
      if(val.stage=='db'){
        this.fields = val.fields;
        this.echarts.dataManager.choose0.config.api.url = "magical_lowcode/openapi/crud/"+val.tableName+"/list";
      }else{
        this.fields = [];
        if(val.apiUuid){
          this.echarts.dataManager.choose0.config.api.url = "magical_lowcode/openapi/post/"+val.apiUuid;
        }else{
          this.echarts.dataManager.choose0.config.api.url = "";
        }
      }
    },
    buildYParam(){
      return {name:"",stack:"",field:"",type:"",areaStyle:{}}
    },
    addYRow(index){
      this.echarts.dataManager.choose0.config.y.splice(index+1,0,this.buildYParam())
    },
    removeYRow(index){
      this.echarts.dataManager.choose0.config.y.splice(index,1);
      if(this.echarts.dataManager.choose0.config.y.length<=0){
        this.echarts.dataManager.choose0.config.y.push(this.buildYParam())
      }
    },
    moreYRow(index){
        this.dialogVisible = true;
        var data = this.echarts.dataManager.choose0.config.y;
    }
  }
}
</script>

<style lang="scss">

</style>
